<!DOCTYPE html>
<html>




	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>		
		<canvas id="myCanvas" width="1440" height="795"> </canvas>
		<script type="text/javascript">
		
			
			var numbers = [
				[
					[0, 0, 1, 1, 1, 0, 0],
					[0, 1, 1, 0, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 1, 1, 0],
					[0, 0, 1, 1, 1, 0, 0]
				], //0
				[
					[0, 0, 0, 1, 1, 0, 0],
					[0, 1, 1, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[1, 1, 1, 1, 1, 1, 1]
				], //1
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 1, 1, 1, 1, 1]
				], //2
				[
					[1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 0, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //3
				[
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 0],
					[0, 0, 1, 1, 1, 1, 0],
					[0, 1, 1, 0, 1, 1, 0],
					[1, 1, 0, 0, 1, 1, 0],
					[1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 1]
				], //4
				[
					[1, 1, 1, 1, 1, 1, 1],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 1, 1, 1, 1, 0],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //5
				[
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //6
				[
					[1, 1, 1, 1, 1, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0]
				], //7
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //8
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 1, 1, 0, 0, 0, 0]
				], //9
				[
					[0, 0, 0, 0],
					[0, 1, 1, 0],
					[0, 1, 1, 0],
					[0, 0, 0, 0],
					[0, 0, 0 ,0],
					[0, 0, 0, 0],
					[0,1, 1, 0],
					[0, 1, 1, 0],
					[0, 0, 0, 0],
					[0, 0, 0, 0]
				], //9
			];
			var canvas = document.getElementById("myCanvas");
			var ctx = canvas.getContext("2d");
			var text = [1,5,10,3,2,10,1,2];
			
			var img= new Image();
			img.src="img/13.jpg";
			var date = new Date;
			var balls=[];
            img.onload =function(){
			
			setInterval(function(){
				ctx.clearRect(0,0,canvas.width,canvas.height);
				ctx.drawImage(img,0,0);
				
                var time = new Date();
                if (time.getSeconds()!= date.getSeconds()){
//              	判断秒数各位?
                var gw = date.getSeconds()%10;
                addBall(850,10,gw);
                var sw1 = parseInt(date.getSeconds()/10);
                var sw2 = parseInt(time.getSeconds()/10);
                 if(sw1!=sw2){
                 	addBall(1500,10,sw1);
                 	
                 }
                 if (time.getMinutes()!= date.getMinutes()){
//              	判断秒数各位?
                var mgw = date.getMinutes()%10;
                addBall(850,10,mgw);
                var msw1 = parseInt(date.getMinutes()/10);
                var msw2 = parseInt(time.getMinutes()/10);
                 if(msw1!=msw2){
                 	addBall(1500,10,msw1);
                 
                 }
                 }
                	//添加小球
                	
                	date = time;//秒数改变
                }
                
                text[0] = parseInt(date.getHours()/10);
                text[1] = date.getHours()%10;
                text[3] = parseInt(date.getMinutes()/10);
                text[4] = date.getMinutes()%10;
                text[6] = parseInt(date.getSeconds()/10);
                text[7] = date.getSeconds()%10;
				for(var i=0;i< text.length;i++){
					if(i==0||i==1){
						drawNumber(i*130+100+10,110,text[i]);
					}
					
					if(i==2){
						drawNumber(i*130+100-10,110,text[i]);						
					}
					else if(i==3||i==4){
						drawNumber(i*130+100-60,110,text[i]);						
					}
					else if(i==5){
						drawNumber(i*130+100-80,110,text[i]);	}
					else if(i==6||i==7){
						drawNumber(i*130+100-140,110,text[i]);						
					}					
					else {
						drawNumber(i*130+100,110,text[i]);	
					}
				
				}
				drawBalls();
			},33);
			};
			
			function addBall(ball1x,ball1y,number){
				for (var i=0;i<numbers[number].length;i++){
					var t1 =i*20;
					for (var k=0;k<numbers[number][i].length;k++){
					var l1 =k*20;
					if(numbers[number][i][k]==1){
					var vx = (Math.random()*5) + 5;
                	if(Math.random()> 0.5){
                		vx=-vx;
                	}
                	var vy = (Math.random()*10) + 5;
                	if (Math.random()>0.5){
                		vy =-vy;
                	}
                	var R = parseInt(Math.random()*256);
	    	        var g = parseInt(Math.random()*256);
	    	        var b = parseInt(Math.random()*256);
	    	        var a = Math.random();
	    	        var color ="rgba("+R+","+g+","+b+","+a+")";
	    	        balls.push([ball1x+l1,ball1y+t1,7,vx,vy,color]);
					}
				}
			}
				
			}
					
			function drawBalls(){
				
				for(var i=0;i<balls.length;i++){
					ctx.beginPath();
					ctx.fillStyle=balls[i][5];
					ctx.arc(balls[i][0],balls[i][1],balls[i][2],0,2*Math.PI);
					ctx.fill();
					balls[i][0]=balls[i][0]+balls[i][3];
					balls[i][1]=balls[i][1]+balls[i][4];
					balls[i][4]=balls[i][4]+3;
					if(balls[i][1]>canvas.height-balls[i][2]){
						balls[i][1]=canvas.height-balls[i][4];
						balls[i][4]=-balls[i][4]*0.8;//控制小球的弹跳
					}
				}
			}
		
			function drawNumber(arcx,arcy,num){
				var number1 = numbers[num];
                var r=7;  
                ctx.fillStyle="white"
            	var R=parseInt(Math.random()*256);
				var g=parseInt(Math.random()*256);
				var b=parseInt(Math.random()*256);
				ctx.fillStyle="rgb("+R+","+g+","+b+")";    
//             
            for(var i=0;i<number1.length;i++){
            	 var y=arcy+i*2*r;             	           	
//          	
            for(var j=0;j<number1[i].length;j++){
            	if(number1[i][j]==1){
//          
                     ctx.beginPath();
                     var x = arcx + 2 * j * r;
                     ctx.arc(x, y, r, 0, 2 * Math.PI);
                     ctx.fill();
                   }
                     }
                     }


                  }
        
		</script>
		<audio autoplay="autoplay" src="mp3/12.mp3"></audio>
	</body>